<!DOCTYPE html>
<html lang="" style="font-size: 37.5px;">
<script>
  (function flexible(window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1

    // adjust body font size
    function setBodyFontSize() {
      if (document.body) {
        document.body.style.fontSize = (12 * dpr) + 'px'
      }
      else {
        document.addEventListener('DOMContentLoaded', setBodyFontSize)
      }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
      //       let clientWidth =docEl.clientWidth
      //       if(docEl.clientWidth >= 750){
      //         clientWidth = 750
      //       }
      // console.log(clientWidth)
      var rem = docEl.clientWidth / 10
      docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
      if (e.persisted) {
        setRemUnit()
      }
    })

    // detect 0.5px supports
    if (dpr >= 2) {
      var fakeBody = document.createElement('body')
      var testElement = document.createElement('div')
      testElement.style.border = '.5px solid transparent'
      fakeBody.appendChild(testElement)
      docEl.appendChild(fakeBody)
      if (testElement.offsetHeight === 1) {
        docEl.classList.add('hairlines')
      }
      docEl.removeChild(fakeBody)
    }
  }(window, document))
</script>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover, user-scalable=no" />
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-control" content="no-cache">
  <meta http-equiv="Cache" content="no-cache">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <!-- <link rel="stylesheet" href="./js/public.js"> -->
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
</head>
<script>
  function getPlatform() {
    let u = navigator.userAgent;
    let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //判断是否是 android终端
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //判断是否是 iOS终端
    if (isAndroid) {
      return "android";
    } else if (isIOS) {
      return "iOS";
    } else {
      return "PC";
    }
  }
  if (getPlatform() === "iOS") {
    let isPageHide = false;
    window.addEventListener("pageshow", function () {
      if (isPageHide) {
        window.location.reload();
      }
    });
    window.addEventListener("pagehide", function () {
      isPageHide = true;
    });
  }
</script>

<body style="font-size: 24px;">
  <noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
  </noscript>
  <style media="screen" type="text/css">
    /* @media screen and (min-width: 750px) {

      html,
      body {
        width: 750px;
        font-size: 37.5px !important;
        margin: auto;
      }
     
    } */
    @media screen and (min-width:750px) {
      html {
        font-size: 50PX !important;
      }

      body {
        font-size: 12PX !important;
        max-width: 750PX !important;
        margin: 0 auto !important;
      }
    }

    html {
      height: 100%;
      background-color: #F5F7FA;
    }

    #app-cockpit-loading {
      width: 100px;
      height: 40px;
      position: absolute;
      font-size: 20px;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
      text-align: center;
    }

    #app-cockpit-loading span {
      display: inline-block;
      width: 6px;
      height: 20px;
      border-radius: 4px;
      background: #5581cd;
      animation: load 1s ease infinite;
      -webkit-animation: load 1s ease infinite;
    }

    #app-cockpit-loading p {
      font-size: 12px;
      color: #666;
    }

    @keyframes load {

      0%,
      100% {
        height: 20px;
        background: #5581cd;
      }

      50% {
        height: 40px;
        margin: -15px 0;
        background: lightblue;
      }
    }

    @-webkit-keyframes load {

      0%,
      100% {
        height: 20px;
        background: #5581cd;
      }

      50% {
        height: 40px;
        margin: -15px 0;
        background: lightblue;
      }
    }

    #app-cockpit-loading span:nth-child(2) {
      animation-delay: 0.2s;
      -webkit-animation-delay: 0.2s;
    }

    #app-cockpit-loading span:nth-child(3) {
      animation-delay: 0.4s;
      -webkit-animation-delay: 0.4s;
    }

    #app-cockpit-loading span:nth-child(4) {
      animation-delay: 0.6s;
      -webkit-animation-delay: 0.6s;
    }

    #app-cockpit-loading span:nth-child(5) {
      animation-delay: 0.8s;
      -webkit-animation-delay: 0.8s;
    }
  </style>
  <!-- <div id="app-cockpit-loading">
    <p>加载中，请稍后</p>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
  </div> -->
  <div id="app"></div>
</body>

</html>